<template>
  <div class="imgs">
    <!-- 头部图片分类 -->
    <div
      class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
    >
      <div class="mui-scroll">
        <a class="mui-control-item mui-active" @click="getImgList(0)">全部</a>
        <!-- 点击，调用获取图片列表 -->
        <a
          class="mui-control-item"
          v-for="item in imgCategory"
          :key="item.id"
          @click="getImgList(item.id)"
        >{{item.title}}</a>
      </div>
    </div>
    <!-- 图片列表 -->
    <router-link
      tag="div"
      :to="'/imginfo/'+item.id"
      class="list"
      v-for="item in imgList"
      :key="item.id"
    >
      <!-- 图片使用懒加载
        1、img添加属性 v-lazy="图片地址"
        2、设置类样式
        img[lazy=loading] {
          width: 40px;
          height: 300px;
          margin: auto;
      }-->
      <img v-lazy="item.img_url">
      <!-- 图片上文字 -->
      <div class="msg">
        <h3>{{item.title}}</h3>
        <p>{{item.zhaiyao}}</p>
      </div>
    </router-link>
  </div>
</template>
<script>
//重点一 导入mui的js文件,初始化才能使用滚动功能
import mui from "../../../../node_modules/mui/js/mui.min.js";
export default {
  data() {
    return {
      imgCategory: [],
      imgList: []
    };
  },
  mounted() {
    //重点二  mui滚动在mounted钩子函数中初始化，即页面元素渲染好，再初始化
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    // 重点三 报错：'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
    // 原因：webpack启用了严格模式，而mui的js不够严谨，造成冲突
    // 解决方法：禁用掉严格模式：不太好，
    // 将mui包放入node_modules中。因为webpack在打包时，将node_modules中js文件排除在外，不会解析打包，修改css，js文件引入路径

    // 重点四 使用mui的scroll 后，无法点击切换tabbar页面，因为tabbar里边mui-tab-item类名冲突，
    // 解决方法：将类名修改，将原来的样式复制给新类名
  },

  created() {
    this.getImgCategory();
    this.getImgList(0);
  },
  methods: {
    // 请求头部图片分类数据
    getImgCategory() {
      this.$http.get("api/getimgcategory").then(res => {
        // console.log(res.body.message);
        this.imgCategory = res.body.message;
      });
    },
    // 请求图片列表数据,id作为参数传入，因为点击时，传入当前点击的id
    getImgList(id) {
      this.$http.get("api/getimages/" + id).then(res => {
        // console.log(res.body.message);
        this.imgList = res.body.message;
      });
    }
  }
};
</script>
<style lang="less" scoped>
// 报错：[Intervention] Unable to preventDefault inside passive event listener
// due to target being treated as passive. 是谷歌浏览器为了提高页面流畅度而搞出来的，
// 解决方法：设置如下样式，none、pan-x、pan-y分别设置单指不可移，可水平移动，可垂直移动
* {
  touch-action: pan-y;
}
.mui-segmented-control.mui-segmented-control-inverted
  .mui-control-item.mui-active {
  border-bottom: none;
}
.imgs {
  .list {
    text-align: center;
    padding: 5px;
    position: relative;
    // 因为懒加载是白色的，改背景色才能看见
    background-color: rgb(247, 247, 247);
    img {
      width: 95%;
    }
    img[lazy="loading"] {
      width: 40px;
      height: 300px;
      margin: auto;
    }
    .msg {
      overflow: hidden;
      width: 92%;
      position: absolute;
      left: 4%;
      bottom: 3%;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.4);
      max-height: 85px;
      text-align: left;
      h3 {
        font-size: 14px;
      }
      p {
        color: #fff;
        font-size: 12px;
      }
    }
  }
}
</style>
